<template>
  <div>
    <div id="userAdvice" style="height: 580px; width: 100%; overflow-y: auto; position: absolute;">
      <div v-for="advise in adviceList" :key="advise.id" class="one">
        <div class="hea"><span style="color: palevioletred; font-weight: bold">{{ advise.user.userName }}</span> 建议：
        </div>
        <el-row style="margin-top: 10px">
          <el-col :span="20">
            <div><p>{{ advise.context }}</p></div>
            <div class="time">{{ advise.createTime }}</div>
          </el-col>
          <el-col :span="4">
            <el-button type="danger"
                       size="small"
                       style="margin-left: 10px; margin-top: 7px"
                       @click="show = true; ad=advise;">回 复
            </el-button>
          </el-col>
        </el-row>
        <div v-for="one in advise.child" :key="one.id" style="height: 60px; background-color: powderblue">
          <el-row style="padding-top: 15px; margin-top: 10px;">
            <el-col :span="4" style="margin-left: 15px">处理人：{{one.user.userName}}</el-col>
            <el-col :span="12">回复内容：{{one.context}}</el-col>
            <el-col :span="6">回复时间：{{one.createTime}}</el-col>
          </el-row>
        </div>
      </div>
    </div>
    <el-card class="box-card" v-show="show">
      <div slot="header">
        <span>请在下面输入您的内容</span>
      </div>
      <div>
        <el-input type="textarea" rows="10" v-model="reply"></el-input>
      </div>
      <div style="border-top: #d9d9d9 solid 1px; margin-top: 20px">
        <el-button style="margin-top: 20px;" size="medium" type="primary" @click="submitMessage">提交</el-button>
        <el-button style="margin-top: 20px;" size="medium" type="primary" @click="show = false">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'userAdvice',
  data() {
    return {
      adviceList: [],
      reply: '',
      show: false,
      ad: {}
    }
  },
  created() {
    this.getAdvise();
  },
  methods: {
    submitMessage() {
      this.$axios.post("/system-notice/save", {
        toId: this.ad.user.id,
        oldNoticeId: this.ad.id,
        context: this.reply
      }).then(res => {
        if (res.data.code === '200') {
          this.$message.success(res.data.data);
        } else {
          this.$message.error(res.data.message);
        }
      });
      this.show = false;
      this.getAdvise();
    },
    getAdvise() {
      this.$axios.get("/system-notice/advise").then(res => {
        if (res.data.code === '200') {
          this.adviceList = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      })
    }
  }
}
</script>

<style scoped>
.one {
  background-color: rgba(0, 27, 193, 0.07);
  margin-left: 70px;
  margin-bottom: 15px;
  width: 70%;
  margin-top: 15px;
  border-radius: 9px;
}

.time {
  color: #999;
  font-size: 13px;
  text-align: right;
  padding-right: 30px;
  margin-bottom: 15px
}

p {
  margin-top: 10px;
  margin-left: 15px;
}

.hea {
  margin-left: 15px;
  font-size: 17px;
  padding-top: 10px;
  border-bottom: #d9d9d9 solid 1px;
  width: 90%;
  color: #666;
}

.box-card {
  float: left;
  z-index: 9999;
  position: absolute;
  margin-left: 16%;
  margin-top: 8%;
  text-align: center;
  width: 40%;
  height: 400px;
}
</style>
